<template>
  <div>
    <div class="outDiv">
      <div class="backToPer">
        <go-back :aa='perUrl ? perUrl : "history"'></go-back>
      </div>
      <scroller lock-x>
        <div>
          <div class="mainDiv">
            <h2 class="title">查询结果</h2>
            <div class="contentBlock">
              <div class="schoolDetail">
                <div class="score">
                  <div class="title">{{ academyName ? academyName : '暂无' }}</div>
                  <div class="msg">
                    <p>2019年招生计划 {{ this.schoolMsg.enrollmentPlan ? this.schoolMsg.enrollmentPlan : '暂无' }}</p>
                    <p>2018年最低位次 {{ this.schoolMsg.enrollmentRanking ? this.schoolMsg.enrollmentRanking : '暂无' }}</p>
                    <p>2018年实际录取数 {{ this.schoolMsg.enrollmentCount ? this.schoolMsg.enrollmentCount : '暂无' }}</p>
                  </div>
                </div>
                <div class="persent">
                  <div class="number" :style="'color:' + defaultColor"><b>{{ this.schoolMsg.probability ? parseInt(this.schoolMsg.probability * 100) : '0' }}</b><span>%</span></div>
                  <div class="line"></div>
                  <div class="hope">{{ schoolMsg.academyType ==1?'有希望':schoolMsg.academyType==2?'希望大':schoolMsg.academyType==3?'靠谱':'很靠谱' }}</div>
                </div>
              </div>
              <ul class="majorList">
                <li class="majorItem" v-for="(item, index) of this.majorData" :key="index">
                  <div class="left" 
                    :style="item.majorType == 1 ? 'color: #F17467' : 
                            item.majorType == 2 ? 'color: #FCC83C' : 
                            item.majorType == 3 ? 'color: #89CC4E' : 'color: #597FF5'">
                    <div class="score"><b>{{ parseInt(item.probability * 100) }}</b><span>%</span></div>
                    <div class="hope">{{ item.majorType ==1?'有希望':item.majorType==2?'希望大':item.majorType==3?'靠谱':'很靠谱' }}</div>
                  </div>
                  <div class="right" @click="$vux.toast.text(item.majName)">
                    <div class="majorName">{{ item.majName }}</div>
                    <div class="majorMsg">学制{{ item.regime===0?'--':item.regime }}年 计划 {{ item.enrollmentPlan===0?'--':item.enrollmentPlan }} 学费{{ item.tuition===0?'--':item.tuition }}/年</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div style="width: 7.5rem;height: 3.5rem;"></div>
        </div>
      </scroller>      
    </div>
  </div>  
</template>

<script>
import goBack from '~/components/goBack'
import ls from 'store2'
export default {
  components: {
    goBack,
  },
  data() {
    return {
      cardVolume: ls.get('cardVolume'),
      userType: ls.get('userType'),
      perUrl: ls.get('backUrl'),
      defaultColor: '#F17467',
      schoolMsg: {},
      majorData: [],
      academyName: null,
    }
  },
  mounted() {
    const sendObj = this.$route.query.type;
    this.schoolMsg = JSON.parse(sendObj.history);
    this.academyName = sendObj.academyName;
    this.majorData = this.schoolMsg.majors;
    switch (this.schoolMsg.academyType) {
      case 1: // 冲击
        this.defaultColor = '#F17467';
        break;
      case 2: // 争取
        this.defaultColor = '#FCC83C';
        break;
      case 3: // 稳求
        this.defaultColor = '#89CC4E';
        break;
      case 4: // 保底
        this.defaultColor = '#597FF5';
        break;
      default:
        break;
    }
  },
  beforeDestroy() {
    ls.remove('backUrl');
  },
  methods: {
    
  },
}
</script>

<style lang="less" scoped>
  
  .outDiv {
		width: 100%;
		height: 100vh;
    background: #fff;
    position: relative;
    
    .backToPer {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: #fff;
      z-index: 100;
    }

		.mainDiv {
			padding: 1.2rem 0.32rem 0;
      width: 100%;
      h2.title {
        color: #C7C7C7;
        font-size: 0.28rem;
        line-height: 0.44rem;
        margin: 0 0 0.24rem;
      }
      .contentBlock {
        padding: 0.48rem 0.32rem;
        box-shadow:0px 2px 10px 0px rgba(153,153,153,0.2);
        border-radius: 0.1rem;
      }
      
      .schoolDetail {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.56rem;

        .score {
          
          .title {
            color: #222;
            font-size: 0.4rem;
            font-weight: bold;
            line-height: 0.49rem;
            margin-bottom: 0.32rem;
          }

          .msg {
            color: #999;
            font-size: 0.26rem;
            line-height: 0.4rem;

            > p { margin-bottom: 0.08rem; }
            > p:last-child { margin-bottom: 0; }

          }

        }

        .persent {
          width: 1.76rem;
          height: 2.24rem;
          box-shadow:0px 2px 10px 0px rgba(153,153,153,0.2);
          border-radius: 0.19rem;
          padding: 0.43rem 0.14rem;

          .number {
            line-height: 0.84rem;
            text-align: center;
            b {
              font-size: 0.6rem;
              font-weight: bold;
            }
            span {
              font-size: 0.36rem;
              font-weight: bold;
            }
          }

          .line {
            margin: 0.08rem 0;
            width: 100%;
            height: 1px;
            background: #E5E8ED;
          }

          .hope {
            color: #999;
            font-size: 0.26rem;
            line-height: 0.37rem;
            text-align: center;
          }

        }

      }

      .majorList {
        list-style: none;
        padding-left: 0;

        .majorItem {
          width: 100%;
          height: 1.73rem;
          background: #F7F7FA;
          margin-bottom: 0.32rem;
          padding: 0.4rem 0.32rem;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .left {
            line-height: 0.56rem;
            text-align: center;
            width: 1.2rem;


            b {
              font-size: 0.4rem;
              font-weight: bold;
            }
            
            span {
              font-size: 0.24rem;
              font-weight: bold;
            }

          }

          .right {
            margin-left: 0.4rem;
            width: 5.04rem;

            .majorName {
              color: #222;
              font-size: 0.26rem;
              font-weight: bold;
              line-height: 0.37rem;
              margin-bottom: 0.18rem;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }

            .majorMsg {
              color: #999;
              font-size: 0.24rem;
              line-height: 0.33rem;
            }

          }

        }

        li.majorItem:last-child { margin-bottom: 0; }

      }

    }
  }

</style>
